<template>
  <div class="home">
    <div class="head">
      <div class="box">
        <div class="head-right">
          <p class="title">闪送物流信息开放平台</p>
          <p class="info">帮您节约成本，助您高效配送</p>
          <img src="../assets/ytjhade.png" alt="" />
        </div>
        <img src="../assets/ytjhade1.png" alt="" class="oimg" />
      </div>
    </div>

    <div class="cent">
      <h3>服务伙伴</h3>
      <p class="tip">请根据您的经营属性选择相应的身份进行入驻</p>
      <div class="box">
        <div class="boxChild" v-for="(item, index) in cent" :key="index">
          <!-- {{item}} -->
          <img :src="item.imgurl" alt="" />
          <p class="centTitle">{{ item.centTitle }}</p>
          <ul class="centList">
            <li v-for="(item, index) in item.centList" :key="index">
              <p></p>
              {{ item }}
            </li>
          </ul>
          <div class="centList1box" style="display: flex; align-items: center">
            <p>案例</p>
            <ul class="centList1">
              <li v-for="(item, index) in item.centList1" :key="index">
                {{ item }}
              </li>
            </ul>
          </div>

          <div class="btn">立即接入</div>
        </div>
      </div>
      <div class="centBom">
        <div class="info">
          <p class="title">根据特定业务场景提供定制化接口</p>
          <div class="cent">
            <div class="centLeft">
              <div>市场联系方式：</div>
              <div class="b1">
                <p>联系邮箱：sever@ishansong.com</p>
                <p>hailong.tian@ishansong.com</p>
              </div>
            </div>
            <div class="centRight">
              <div>产品技术组联系方式：</div>
              <div>联系邮箱：open_seller@ishansong.com</div>
            </div>
            
          </div>
        </div>
      </div>
    </div>

    <div class="hzhb">
      <p class="title">合作伙伴</p>
      <ul>
        <li v-for="(item,index) in hzhb" :key="index">
          <img :src="item" alt="">
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "ShouYe",
  data() {
    return {
      cent: [
        {
          imgurl:
            "",
          centTitle: "自营商户",
          centList: [
            "有研发能力的商户对接自己的后台系统，以门店维度发单",
            "所有门店共用一个账户（预充值）结算",
            "可在商家版后台管理门店信息、订单信息",
          ],
          centList1: ["味多美", "海底捞外送", "必胜客", "途虎养车"],
        },
        {
          imgurl:
            "",
          centTitle: "平台服务商",
          centList: [
            "拥有独立技术团队，为其商户提供配送能力的平台",
            "商户授权平台开通闪送商家版账号",
            "平台商户与闪送签约并结算运费",
          ],
          centList1: ["有赞", "麦芽糖", "美团"],
        },
      ],

      hzhb:[
        'http://cdn.ishansong.com/iss-new-open/1a65289efd13fea7910102148cf13595.png',
        'http://cdn.ishansong.com/iss-new-open/fcb545d028b05ae382b391efa81e2659.png',
        'http://cdn.ishansong.com/iss-new-open/8a9856f78c5d992c507f85dfba5400cc.png',
        'http://cdn.ishansong.com/iss-new-open/77be7048abdb5984085b74b444afb667.png',
        'http://cdn.ishansong.com/iss-new-open/0b3b7eacbf7138809589a9a7ff5e9d0d.png',
        'http://cdn.ishansong.com/iss-new-open/94827ed429c38426dd95a9841f69217c.png',
        'http://cdn.ishansong.com/iss-new-open/fcb545d028b05ae382b391efa81e2659.png',
        'http://cdn.ishansong.com/iss-new-open/8a9856f78c5d992c507f85dfba5400cc.png',
        'http://cdn.ishansong.com/iss-new-open/77be7048abdb5984085b74b444afb667.png',
        'http://cdn.ishansong.com/iss-new-open/0b3b7eacbf7138809589a9a7ff5e9d0d.png',
        'http://cdn.ishansong.com/iss-new-open/94827ed429c38426dd95a9841f69217c.png',
        'http://cdn.ishansong.com/iss-new-open/fcb545d028b05ae382b391efa81e2659.png',
        'http://cdn.ishansong.com/iss-new-open/8a9856f78c5d992c507f85dfba5400cc.png',
        'http://cdn.ishansong.com/iss-new-open/77be7048abdb5984085b74b444afb667.png',
        'http://cdn.ishansong.com/iss-new-open/0b3b7eacbf7138809589a9a7ff5e9d0d.png',
        'http://cdn.ishansong.com/iss-new-open/94827ed429c38426dd95a9841f69217c.png',
        'http://cdn.ishansong.com/iss-new-open/fcb545d028b05ae382b391efa81e2659.png',
        'http://cdn.ishansong.com/iss-new-open/8a9856f78c5d992c507f85dfba5400cc.png',
        'http://cdn.ishansong.com/iss-new-open/77be7048abdb5984085b74b444afb667.png',
        'http://cdn.ishansong.com/iss-new-open/0b3b7eacbf7138809589a9a7ff5e9d0d.png',
      ]
    };
  },
};
</script>

<style scoped>
.head {
  height: 580px;
  background: url("../assets/ytjBg.png");
}
.box {
  width: 1280px;
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
}
.head .box .title {
  font-weight: 500;
  color: #ffffff;
  font-size: 48px;
  margin-top: 120px;
}
.head .box .info {
  margin-top: 8px;
  margin-bottom: 57px;
  font-weight: 500;
  color: #ffffff;
  font-size: 20px;
}
.head .box .oimg {
  width: 520px;
  height: 437px;
  margin-top: 100px;
}
.cent h3 {
  text-align: center;
  font-size: 36px;
  color: #333;
  font-weight: 500;
  line-height: 40px;
  padding-top: 60px;
}
.tip {
  color: #999;
  font-size: 16px;
  text-align: center;
  margin-top: 8px;
}
.cent .box {
  width: 988px;
  margin-top: 50px;
  margin-bottom: 48px;
}
.cent .box .boxChild {
  width: 470px;
  box-shadow: 0 2px 16px 0 rgb(0 0 0 / 6%);
  border-radius: 4px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cent .box .boxChild img {
  margin-top: 36px;
  width: 111px;
  height: 111px;
}
.boxChild .centTitle {
  margin: 30px 0 15px;
  font-size: 26px;
  font-weight: 500;
  color: #333333;
}
.centList li {
  list-style: none;
  font-size: 14px;
  margin-bottom: 13px;
  display: flex;
  align-items: center;
}
.centList li p {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #2f77f4;
  margin-right: 10px;
}
.centList1box p {
  font-size: 14px;
  margin-right: 5px;
}
ul.centList1 {
  display: flex;
}
.centList1box ul.centList1 li {
  list-style: none;
  font-size: 13px;
  color: #666666;
  line-height: 18px;
  border: 1px solid #efefef;
  border-radius: 5px;
  margin-right: 7px;
  padding: 3px 11px 4px;
}
.boxChild .btn {
  width: 208px;
  height: 55px;
  line-height: 55px;
  text-align: center;
  background: #2f77f4;
  border-radius: 47px;
  font-size: 21px;
  font-weight: 500;
  color: #ffffff;
  margin-top: 36px;
  margin-bottom: 36px;
}
.centBom {
  width: 988px;
  height: 166px;
  border-radius: 4px;
  background: rgba(47, 119, 244, 0.04)
    url("");
  background-size: 160px 166px;
  background-position: right top;
  margin: 0 auto;
  margin-bottom: 60px;
}
.centBom .info {
  width: 828px;
  padding: 22px 0 22px 40px;
  background: #f7faff;
}
.centBom .info .title {
  font-size: 26px;
  font-weight: 500;
  color: #333333;
  margin-bottom: 17px;
}
.centBom .info .cent {
  display: flex;
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  height: 71px;
}
.centBom .info .cent .centLeft,.centBom .info .cent .centRight{
  display: flex;
  flex-direction: column;
}
.centBom .info .cent div {
  flex: 1;
}
.hzhb{
  background: #f5f9ff;
}
.hzhb .title{
  text-align: center;
  font-size: 36px;
  color: #333;
  font-weight: 500;
  line-height: 40px;
  padding-top: 60px;
  background-size: 186px 12px;
}
.hzhb ul{
  width: 1080px;
  margin: 0 auto;
  margin-top: 60px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.hzhb ul li{
  width: 200px;
  height: 100px;
  list-style: none;
  margin-bottom: 20px;
}
.hzhb ul li img{
  width: 100%;
  height: 100%;
}
</style>
